Оцените, пожалуйста, верстку

Catherine · April 22, 2012

Доброго времени суток, уважаемые жители форума!

Сверстала несколько страниц, крайне нуждаюсь в критике :blush:

В прошлый раз мне советовали взять работу посложнее(за что огромная всем благодарность), и, как мне кажется, теперь явно будет к чему придраться

Интересует все, что может касаться верстки: общее впечатление, разметка блоков, использование свойств и классов, оптимизация графики, явные ошибки, правильность выбора jQuery-плагинов, и на что вообще стоит обратить внимание.

Собственно первая страница, вторая, третья. По идее, кроссбраузерность от IE7, Safari, Chrome, FF, Opera-последние версии браузеров.

Скроллинг динамической высоты, в зависимости от высоты окна браузера.

Буду благодарна любой конструктивной критике по верстке. Заранее спасибо, что уделили этой теме внимание!

UPD: больной вопрос-тултипы на первой странице. Стояла следующая задача- наклонный блок с полупрозрачным фоном, нижним уголком фиксированной высоты, с тенью, нефиксированного размера, скругленными углами. Решено, но довольно грубо, хотелось бы знать, может, кто подскажет более изящное кроссбраузерное решение? Спасибо!

Edited April 23, 2012 by Catherine

wildhind · April 23, 2012

Вот ошибочка.

jscrollpane требует overflow:auto, тогда работает. С overflow:hidden естественно только обрезается текст. Выглядит как ошибка и ошибкой является.

Catherine · April 23, 2012

Вот ошибочка.
jscrollpane требует overflow:auto, тогда работает. С overflow:hidden естественно только обрезается текст. Выглядит как ошибка и ошибкой является.

Сам плагин jscrollpane я объявляю в блоке #pane, которому задаю overflow:auto, а <div class="scrollBox"> - обертка для jscrollpane, чтобы задать внешние отступы и абсолютно спозиционировать этот блок относительно основного контента ( контент в идеале должен подстраиваться под высоту окна браузера). Пробовала без обертки, но тогда не везде корректно отображался скроллинг при динамическом изменении высоты окна браузера. Или Вы считаете, что обертка тут лишняя, и дело в кривизне рук? Если да, тогда буду искать пути избавления от внешней обертки, чтобы добиться кроссбраузерности для поставленной задачи.

Edited April 23, 2012 by Catherine

wildhind · April 23, 2012

ах вот оно как!

Тогда поправлюсь и разверну своё замечание насчёт этого блока.

Первым делом я смотрела в ФФ — там не работает скролл колесом мыши. Это явная ошибка. Не знаю в чём она, надо разбираться, но это не дело.

Смотрю теперь в сафари — скролл колесом работает.

Догадаться же, что кругляшок справа — это скролл… надо очень творческий склад ума иметь. Хотя бы полоску нарисуйте, чтобы можно было предположить, что кругляшок ещё и таскать мышкой можно по ней.

Ещё глючок:

стрелочка оторвалась в ФФ.

У меня такое было на одном из последних проектов. Тоже отрывалась стрелочка в части браузеров, если позиционировать её отрицательным маргином.

И совершенно одинаково и чётко ведёт себя, если позиционировать абсолютом.

Catherine · April 23, 2012

ах вот оно как!
Тогда поправлюсь и разверну своё замечание насчёт этого блока.
Первым делом я смотрела в ФФ — там не работает скролл колесом мыши. Это явная ошибка. Не знаю в чём она, надо разбираться, но это не дело.
Смотрю теперь в сафари — скролл колесом работает.
Догадаться же, что кругляшок справа — это скролл… надо очень творческий склад ума иметь. Хотя бы полоску нарисуйте, чтобы можно было предположить, что кругляшок ещё и таскать мышкой можно по ней.

Не-не-не, извините, пожалуйста, :blush: дизайн совсем-совсем не обсуждается Это именно задумка дизайнера, (или, все же, надеюсь, конечного заказчика), которому захотелось именно так, и не иначе. Моей задачей была реализация, в том числе и ..творческих задумок, которые и являются особенностями данного проекта. Хотя, возможно, если я добавлю "стрелочки кругляшку" при наведении на весь блок, а не на сам "кругляшок", действительно дизайн не пострадает, а интерфейс станет более "человекопонятным".

А вот то, почему в webkit- браузерах при наведении на блок скролл колесом мыши работает, а в остальных-нет (при этом демо-примеры плагина работают как надо)-буду думать, хоть пока и не представляю, как. Но спасибо огромное за замечания!

Ещё глючок:
стрелочка оторвалась в ФФ.
У меня такое было на одном из последних проектов. Тоже отрывалась стрелочка в части браузеров, если позиционировать её отрицательным маргином.
И совершенно одинаково и чётко ведёт себя, если позиционировать абсолютом.

Это не стрелочка, к сожалению, не отрывается. Это я таким вот некрасивым образом сделала фон подсказок. Если блок высокий, то картинка растягивается, соответственно, насколько я поняла, расстояние до почти одноцветной части блока немного изменяется, и наоборот, идет внахлест при маленьком размере подсказки.

Edited April 23, 2012 by Catherine

Viper · April 23, 2012

1. Не нашел <h1>. Логотип можно сделать(а в вашем случае и стоило бы, ИМХО) как <h1> c background и спрятанным текстом. Пример:


h1 {
    width: 250px;
    height: 100px;
    background: url(path-to/logo.png);
    text-indent: -9999px; /* прячем текст за пределами заголовка, прием предложен Джеффри Зельдманом */
    overflow: hidden;
}

2. Забываем ставить атрибут title для ссылок...

3. Alt у img в виде "название файла.jpg"?) Лучше тогла пустым его оставляйте. Иначе вы вредите пользователям с ограниченными возможностями Вызывает ошибки доступности.

Catherine · April 23, 2012

1. Не нашел <h1>. Логотип можно сделать(а в вашем случае и стоило бы, ИМХО) как <h1> c background и спрятанным текстом. Пример:
h1 {
    width: 250px;
    height: 100px;
    background: url(path-to/logo.png);
    text-indent: -9999px; /* прячем текст за пределами заголовка, прием предложен Джеффри Зельдманом */
    overflow: hidden;
}
2. Забываем ставить атрибут title для ссылок...
3. Alt у img в виде "название файла.jpg"?) Лучше тогла пустым его оставляйте. Иначе вы вредите пользователям с ограниченными возможностями Вызывает ошибки доступности.

Точно, забыла про заголовок. По пунктам 2 и 3 согласна с Вами. Спасибо за критику! Буду исправляться.

troll · April 23, 2012

2. Забываем ставить атрибут title для ссылок...

Можно узнать, для каких именно ссылок вы бы поставили title?

Catherine · April 23, 2012

2. Забываем ставить атрибут title для ссылок...
Можно узнать, для каких именно ссылок вы бы поставили title?

Ну вот конкретно в данном случае я забыла title прописать у ссылки в футере, а так считаю хорошим тоном если не прописывать, то хотя бы проставлять title для ссылок, и хотелось бы, чтобы это просто вошло в привычку, но пока все еще забываю.

Edited April 23, 2012 by Catherine

Viper · April 23, 2012

2. Забываем ставить атрибут title для ссылок...
Можно узнать, для каких именно ссылок вы бы поставили title?

Для всех, исключений не припомню... И не только для ссылок, часто используеться в приложениях для различных тегов, как hint. Для крупных, популярных сайтов(не для всех, конечно, и чаще, если направленно на зарубежный рынок) составление тайтлов - важная часть перез запуском, которая часто отводиться отдельно: контент-менеджерам, переводчикам, аналитикам... в разных компаниях по разному.

Edited April 23, 2012 by Viper

troll · April 23, 2012

Хм... Иногда наличие хинтов оправдано, но часто назначение ссылки или кнопки вполне очевидно, и все равно туда пихают подсказку. Бывает даже, что она тупо дублирует текстовое содержимое элемента. В чем же смысл добавления такого тайтла?

Edited April 23, 2012 by troll

Catherine · April 23, 2012

Хм... Иногда наличие хинтов оправдано, но часто назначение ссылки или кнопки вполне очевидно, и все равно туда пихают подсказку. Бывает даже, что она тупо дублирует текстовое содержимое элемента. В чем же смысл добавления такого тайтла?

Я думаю тут речь идет не о "пихании" подсказки везде и вся, а о предоставлении готовой верстки, включающей атрибут title для ссылок для возможности дальнейшего его редактирования при возникновении такой необходимости. Надо-впишут, не надо-оставят как есть, но Вы свое дело сделали - предоставили такую возможность. Я предпочитаю такой подход.

Viper · April 23, 2012

Хм... Иногда наличие хинтов оправдано, но часто назначение ссылки или кнопки вполне очевидно, и все равно туда пихают подсказку. Бывает даже, что она тупо дублирует текстовое содержимое элемента. В чем же смысл добавления такого тайтла?
Сообщение отредактировал troll: Сегодня, 14:57

Плохо, когда дублирует. По-этому время на составление тайтлов и структуры документа часто отводят очень много и относяться к этому очень серьезно.

Исключения бывают, наверное, я слишком обобщил его использование. Я не беру в расчет специализированные ресурсы.

Зачем это нужно сайтам(не специализированным), для которых важна высокая доступность:

1. Есть люди, для которых если не появилась подсказка при наведении, то это не ссылка и изменение формы курсора или внешнего вида для них ничего не говорит.

2. Многие пользователи "бояться интернета". Подсказки для них(даже, если это дупликат) - это подтверждение, что они перейдут туда, куда хотели. "Пользователи верят подсказкам больше..."

3. Сайт с проработанными тайтлами для не опытных пользователей выгладит более дружелюбно, даже если они им и не столь важны.

П.С. Каждый проект/caйт особенный, для каждого проекта свои рамки, приоритеты. Title не являеться обьязательным атрибутом. И важен не для верстальщиков, а для usability-специалистов. При использовании сайта, пользователь "не должен думать, он должен знать". Вы можете критиковать - "элементарно же, как этого можно не понять: пункт Каталог в меню - значить пользователь попадет на страницу каталога товаров. Он же не слепой. Или по важему все не опытные пользователи идиоты?!". Ну что тут можно ответить... Зачем же так грубо, ну не все... <_<

П.П.С. Вот только холиваров не нужно. И заявлений "мне/нам этого не нужно..." Не нужно? ну не ставьте...

Edited April 23, 2012 by Viper

wildhind · April 23, 2012

Тайтлы часто заслоняют собой осмысленное содержание.

хм… ну да, наверно это дружелюбно.

Вот пример:

Информативность тайтла под большим вопросом. Его полезность — под ещё большим вопросом. И совершенно очевидно, что он заслоняет собой нужную и востребованную информацию, такую как пункт подменю.

Viper · April 23, 2012

Тайтлы часто заслоняют собой осмысленное содержание.
хм… ну да, наверно это дружелюбно.
Вот пример:
Информативность тайтла под большим вопросом. Его полезность — под ещё большим вопросом. И совершенно очевидно, что он заслоняет собой нужную и востребованную информацию, такую как пункт подменю.

Вы навели пример, где какраз показана, именно, полезность тайтлов: он уточняет куда пользователь попадет при двойном нажатии миши. "По логике не ясно?" - нет! для многих не ясно и для меня это не очевидно без тайтла. Вы смотрите на пользователей свысока и не вытаетесь им помощь, понять их, а пытаетесь только показать свое превосходство. Заслоняет? и что? отвести указатель не пробывали? Тайтл появляеться только, если курсор задержиться на каком-то елементе, что будет означать: есть шанс, что пользователь ждет подсказку, потому-что не уверен, что будет при нажатии миши на этот пункт. А вы хотите его этого лишить... Всегда и ко всему можно Придумать повод придраться, это же проще чем анализировать, приводить статистику, читать книги - делать то, что тебе не хочется делать и ты пытаешься найти причину, что бы этого не делать... ИМХО

Его полезность, на вашем примере, я вижу даже со своей стороны, как пользователя. Так что, польза от него, в данном случае, Есть и основательная.

П.С. Естественно, пользы от тайтла нету, если вы делаете сайт для "избранных", ну или типа Хабра...

wildhind · April 23, 2012

Заслоняет? и что? отвести указатель не пробывали?

пробовали

менюшка скрывается

То есть, прочитать этот пункт меню практически не представляется возможным. Он виден только первую секунду, пока тайтл не всплыл.

Это и называется заботой о пользователях?

Viper · April 23, 2012

Viper (23 Апрель 2012 - 17:29) писал:
Заслоняет? и что? отвести указатель не пробывали?
пробовали
менюшка скрывается
То есть, прочитать этот пункт меню практически не представляется возможным. Он виден только первую секунду, пока тайтл не всплыл.
Это и называется заботой о пользователях?

Что вся? :blink: Она что видна только если держать курсор на этом пункте?

Кроме того, вам не достаточно 1сек, что бы увидеть 2-3 слова? Как по мне, это незначительная цена за простоту понимания интерфейса и повышенную usability, ИМХО.

Интересно много ли жалоб им поступило по поводу этой "проблемы"...

П.С. Вы бы навели пример, который люди могут без труда пощупать, а не кидать ссылку на админку Битрикса... Проблема, как по мне, надуманная, ИМХО

buddah · April 23, 2012

Viper, то есть wildhind - не пользователь, которому тайтлы мешают (мне, кстати, тоже)? А вот придуманные пользователи, которые "бояться интернета"(с), исчисляются тысячами? Да ну бросьте. Тайтлы должны быть там где должны, а не везде, где только можно.

mishka · April 23, 2012

Чтобы в опере да ФФ кастомный скролл работал на колесико мыши -- попробуй подключить последний mousewheel

Viper · April 23, 2012

А вот придуманные пользователи, которые "бояться интернета"(с), исчисляются тысячами?

В суме всех не опытных пользователей, для определенных сайтов, Да.

Тайтлы должны быть там где должны, а не везде, где только можно.

Как я уже писал, все зависит от проекта, целей и приоритетов. Я не утверждал, что тайтлы должны быть абсолюбно везде! В предоставленном примере, информация в тайтле была бы даже мне полезной!

то есть wildhind - не пользователь, которому тайтлы мешают (мне, кстати, тоже)?

Вот только учтите, что тайтлы вам(некоторым пользователям) только мешают и, я думаю, не существенно. А некоторым людям они помогают обращаться с сайтам без помощи других людей, облегчают(значительно) работу с сайтом и желание остаться на нем. Если вы пользователей видете только в таком узком диапазоне и делаете сайты только для "опытных", то ОК, я понял. Но тайтлы служать не для вас(с области ИТ). Есть, например, параметры, которые служат для облегчения работы с сайтом слепым людям. Вы их тоже будете критиковать?

Если вам не нужно это все? ну так не делайте. Разговор то о другой категории пользователей!

Catherine · April 23, 2012

Чтобы в опере да ФФ кастомный скролл работал на колесико мыши -- попробуй подключить последний mousewheel

Спасибо за совет! Взяла на заметку. А пока мне все же предстоит разобраться, почему в демо-оригинале все нормально, а конкретно в моем примере прокрутка не везде работает, где я успела накосячить

mishka · April 24, 2012

Чтобы в опере да ФФ кастомный скролл работал на колесико мыши -- попробуй подключить последний mousewheel
Спасибо за совет! Взяла на заметку. А пока мне все же предстоит разобраться, почему в демо-оригинале все нормально, а конкретно в моем примере прокрутка не везде работает, где я успела накосячить

Какая версия библиотеки jQuery в примере и какая у тебя?

Всегда проверяй наличие свежей версии плагина http://jscrollpane.kelvinluck.com/

Просто с версии jQuery 1.7.1 надо юзать новый mousewheel (точно не скажу с какой версии но бери последний -- не ошибешся)

Catherine · April 24, 2012

Какая версия библиотеки jQuery в примере и какая у тебя?
Всегда проверяй наличие свежей версии плагина http://jscrollpane.kelvinluck.com/
Просто с версии jQuery 1.7.1 надо юзать новый mousewheel (точно не скажу с какой версии но бери последний -- не ошибешся)

Спасибо! Вы правы, действительно, надо было проверить версию, прежде чем подключать плагин. Скачала последние версии mousewheel и jscrollpane с оф. страницы и все заработало.

Edited April 24, 2012 by Catherine

alexandr_v-vich · April 24, 2012

На первой сраницы. Стрелочки влево-вправо. display, наверное, стоит поменять на visibility… а может и нет…

Стрелочки появляются только при наведении на блок с фото. Т.е., чтобы они появились мышку необходимо навести на этот блок, а затем аккуратно, не сходя с границы блока перевести курсор на стрелочку… у меня постоянно курсор слетает.

Можно просто площадь всей стрелочки увеличить (не обязательно отображая это). На высоту блока — точно. По ширине — ну там смотреть надо.

И наводить, возможно, стоит не только на этот блок, но и на предполагаемое расположение ещё не видимых стрелочек.

mishka · April 24, 2012

Давай на "ты".

Еще одно замечание по скроллу.

Ты вызываешь ф-цию построения кастом скролла на DOM ready.

И получается что у тебя высоты высчитываются на момент построения DOM. Но шрифты внутри блока со скроллом нестандартные и подгружаются немного позже.

В твоем примере подгружаемый шрифт занимает меньше места, поэтому если только обновишь страничку и проскролишь вниз, то увидишь "непонятную" пустоту.

Для того чтобы это убрать можно на window load запустить пересчет:

jQuery('#pane').data('jsp').reinitialise();

И при ресайзе не надо запускать всю ф-цию построения. Достаточно запустить код что я выше привел.

У тебя же верстка фиксированная. Почему на ресайз окна ты этот скролл постоянно пересчитываешь? Зачем напрягать браузер лишний раз?

UPD. Все, понял, у тебя высота динамическая.

Sign In

Оцените, пожалуйста, верстку

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information